<template>
  <div class="clip-image-box">
    <div class="canvas-box" @mousedown="startFuc" @mouseup="moveFuc">
      <canvas class="myCanvas" :width="CW" :height="CW"></canvas>
      <div class="mark" ref="mark" :style="getStyle"></div>
    </div>
    <input type="file" ref="file" class="file" @change="changeFuc" />
    <button @click="clickFuc">上传图片</button>
    <button @click="saveFuc">保存</button>
  </div>
</template>

<script>

export default {
  name: 'ClipImage',
  data() {
    return {
      CW: 400,
      MW: 200,
      MH: 200,
      IW: 0,
      IH: 0,
      IT: 0,
      IL: 0,
      IMAGE: null,
      canvas: '',
      ctx: '',
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      
    }
  },
  mounted() { },
  computed: {
    getStyle() {
      return `width:${this.MW}px;height:${this.MH}px`
    }
  },
  methods: {
    clickFuc() {
      this.$refs.file.click()
    },
    changeFuc(e) {
      let fileMessage = e.target.files[0]
      let fileRed = new FileReader();
      fileRed.readAsDataURL(fileMessage)
      fileRed.onload = (e) => {
        this.IMAGE = new Image()
        this.IMAGE.src = e.target.result
        this.IMAGE.onload = () => {
          this.IW = this.IMAGE.width
          this.IH = this.IMAGE.height
          this.IT = (this.CW - this.IW) / 2
          this.IL = (this.CW - this.IH) / 2
          this.drawImg()
        }
      }
    },
    drawImg() {
      this.canvas = document.querySelector(".myCanvas")
      this.ctx = this.canvas.getContext('2d')
      this.ctx.clearRect(0, 0, this.CW, this.CW)
      this.ctx.drawImage(this.IMAGE, this.IT, this.IL, this.IW, this.IH)
    },
    //拖拽，鼠标按下
    startFuc(e) {
      this.startX = e.clientX
      this.startY = e.clientY
    },
    //鼠标抬起
    moveFuc(e) {
      this.endX = e.clientX
      this.endY = e.clientY
      let changeX = this.endX - this.startX
      let changeY = this.endY - this.startY
      this.IT = this.IT + changeX
      this.IL = this.IL + changeY
      this.drawImg()
      this.startX = e.clientX;
      this.startY = e.clientY;
    },
    //保存图片
    //将图片转化为base64再进行下载
    saveFuc(){
    /* //实例化一个img对象
    const img = new Image();
    //设置img的图片路径
    img.src = url;
    //设置跨域解决
    img.setAttribute('crossOrigin', 'Anonymous');
    //img加载完后处理
    img.onload = function() {
      //创建一个canvas对象
      const canvas = document.createElement('canvas')
      //把图片的宽度设为canves的宽度
      canvas.width = img.width
      //把图片的高度设为canves的高度
      canvas.height = img.height
      //创建一个2d画布
      const ctx = canvas.getContext('2d')
      // 将img中的内容画到画布上
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      // 将画布内容转换为base64
      let base64 = canvas.toDataURL() */
      let imageData = this.ctx.getImageData(100,100,this.MW,this.MH)
       let canvas2 = document.createElement("canvas")
       let ctx2 = canvas2.getContext("2d")
       canvas2.width = this.MW
       canvas2.height = this.MH
       ctx2.putImageData(imageData,0,0,0,0,this.MW,this.MH)
       let base64 = canvas2.toDataURL('image/png')
      // 创建a链接
      const a = document.createElement('a')
      a.href = base64
      a.download = ''
      // 触发a链接点击事件，浏览器开始下载文件
      a.click()
      this.ctx.clearRect(0,0,this.CW,this.CW)
      this.ctx2.clearRect(0,0,this.CW,this.CW)
    }
    },

  }

</script>

<style scoped>
.canvas-box {
  margin: 0 auto;
  position: relative;
}

.myCanvas {
  border: 1px solid pink;
}

.mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid blue;
  background: rgba(0, 0, 0, 0.2);
}

.file {
  display: none;
}

.canvas-box {
  border: 1px solid orange;
  width: 400px;

}
</style>